import { Menu, X } from 'lucide-react';
import { useState } from 'react';
import { categories } from '@/data/config';
import { useAppContext, useAppActions } from '@/contexts/AppContext';

export default function CategoryFilter() {
  const { state } = useAppContext();
  const { setActiveCategory } = useAppActions();
  const { activeCategory } = state;
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);

  const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);

  return (
    <>
      {/* 桌面端导航 */}
      <nav className="hidden md:block opacity-0 animate-fade-in-delay">
        <div className="flex justify-center flex-wrap gap-3 mb-8">
          {categories.map((category, index) => (
            <button
              key={category.id}
              onClick={() => setActiveCategory(category.id)}
              style={{ animationDelay: `${index * 50}ms` }}
              className={`relative px-6 py-2.5 rounded-full font-medium transition-all duration-300 opacity-0 animate-slide-up hover:scale-105 ${
                activeCategory === category.id
                  ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg shadow-blue-500/25'
                  : 'bg-white/8 backdrop-blur-md border border-white/20 text-white/80 hover:bg-white/12 hover:text-white'
              }`}
            >
              {category.name}
              
              {/* 活跃状态下划线 */}
              {activeCategory === category.id && (
                <div className="absolute bottom-0 left-3 right-3 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full" />
              )}
            </button>
          ))}
        </div>
      </nav>

      {/* 移动端抽屉触发按钮 */}
      <div className="md:hidden mb-6">
        <button
          onClick={toggleDrawer}
          className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/8 backdrop-blur-md border border-white/20 text-white hover:bg-white/12 transition-all duration-200 opacity-0 animate-fade-in"
        >
          <Menu className="w-5 h-5" />
          <span>分类筛选</span>
        </button>
      </div>

      {/* 移动端抽屉 */}
      {isDrawerOpen && (
        <>
          {/* 遮罩 */}
          <div
            onClick={toggleDrawer}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 md:hidden opacity-0 animate-fade-in"
          />

          {/* 抽屉内容 */}
          <div className="fixed left-0 top-0 bottom-0 w-80 bg-slate-900/95 backdrop-blur-xl border-r border-white/10 z-50 md:hidden transform -translate-x-full animate-slide-in-left">
            <div className="p-6">
              {/* 抽屉头部 */}
              <div className="flex items-center justify-between mb-8">
                <h2 className="text-xl font-bold text-white">分类筛选</h2>
                <button
                  onClick={toggleDrawer}
                  className="p-2 rounded-lg hover:bg-white/10 transition-colors duration-200"
                >
                  <X className="w-5 h-5 text-white" />
                </button>
              </div>

              {/* 分类列表 */}
              <div className="space-y-3">
                {categories.map((category, index) => (
                  <button
                    key={category.id}
                    onClick={() => {
                      setActiveCategory(category.id);
                      toggleDrawer();
                    }}
                    style={{ animationDelay: `${index * 50}ms` }}
                    className={`w-full text-left px-4 py-3 rounded-xl font-medium transition-all duration-200 opacity-0 animate-slide-up ${
                      activeCategory === category.id
                        ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white'
                        : 'text-white/80 hover:bg-white/10 hover:text-white'
                    }`}
                  >
                    {category.name}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </>
      )}
    </>
  );
}